<template>
    <div id="game_217" class="game_view">
        <ul class="tab" style="height: 35px;text-align: left;" data-id="217" id="game_tm">
            <li class="tab_title02">
                <a href="javascript:void(0)" @click="changeIndex(0)" :class="navIndex==0? 'on' : ''">特码B</a>
                <a href="javascript:void(0)" @click="changeIndex(1)" :class="navIndex==1? 'on' : ''">特码A</a>
            </li>
        </ul>
        <div class="game_tm" v-if="navIndex==0">
            <table class="u-table2 kuaijie_table">
                <thead>
                <tr>
                    <th colspan="12" style="display:none">特码B</th>
                </tr>
                <tr>
                    <th>号码</th>
                    <th>赔率</th>
                    <th>金额</th>
                    <th>号码</th>
                    <th>赔率</th>
                    <th>金额</th>
                    <th>号码</th>
                    <th>赔率</th>
                    <th>金额</th>
                    <th>号码</th>
                    <th>赔率</th>
                    <th>金额</th>
                    <th>号码</th>
                    <th>赔率</th>
                    <th>金额</th>
                </tr>
                </thead>
                <tbody>
                    <TrItem :key="i" v-for="(row,i) in list[0]" :row="row" :bet-number="betNumber" :show-name="false"></TrItem>
                </tbody>
            </table>
        </div>
        <div class="game_tm" v-if="navIndex==1">
            <table class="u-table2 kuaijie_table">
                <thead>
                <tr>
                    <th colspan="12" style="display:none">特码A</th>
                </tr>
                <tr>
                    <th>号码</th>
                    <th>赔率</th>
                    <th>金额</th>
                    <th>号码</th>
                    <th>赔率</th>
                    <th>金额</th>
                    <th>号码</th>
                    <th>赔率</th>
                    <th>金额</th>
                    <th>号码</th>
                    <th>赔率</th>
                    <th>金额</th>
                    <th>号码</th>
                    <th>赔率</th>
                    <th>金额</th>
                </tr>
                </thead>
                <tbody>
                    <TrItem :key="i" v-for="(row,i) in list[1]" :row="row" :bet-number="betNumber" :show-name="false"></TrItem>
                </tbody>
            </table>
        </div>
        <table class="u-table2 mt10">
            <thead>
            <tr style="display:none">
                <th>两面</th>
            </tr>
            <tr>
                <th>号</th>
                <th>赔率</th>
                <th>金额</th>
                <th>号</th>
                <th>赔率</th>
                <th>金额</th>
                <th>号</th>
                <th>赔率</th>
                <th>金额</th>
                <th>号</th>
                <th>赔率</th>
                <th>金额</th>
            </tr>
            </thead>
            <tbody>
                <TrItem :key="i" v-for="(row,i) in list[2]" :row="row" :bet-number="betNumber" :show-numbers="false"></TrItem>
            </tbody>
        </table>

    </div>
</template>

<script>
    import TrItem from "../components/TrItem";
    import {mapState} from "vuex";
    export default {
        name: 'TeMa',
        components:{
            TrItem
        },
        data(){
            return{
                navIndex:0,
                list:[
                    // 特码B
                    [
                        [
                            {id:23842,number:'01',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23843,number:'11',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23844,number:'21',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23845,number:'31',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23846,number:'41',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23847,number:'02',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23848,number:'12',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23849,number:'22',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23850,number:'32',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23851,number:'42',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23852,number:'03',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23853,number:'13',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23854,number:'23',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23855,number:'33',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23856,number:'43',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23857,number:'04',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23858,number:'14',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23859,number:'24',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23860,number:'34',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23861,number:'44',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23862,number:'05',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23863,number:'15',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23864,number:'25',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23865,number:'35',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23866,number:'45',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23867,number:'06',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23868,number:'16',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23869,number:'26',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23870,number:'36',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23871,number:'46',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23872,number:'07',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23873,number:'17',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23874,number:'27',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23875,number:'37',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23876,number:'47',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23877,number:'08',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23878,number:'18',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23879,number:'28',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23880,number:'38',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23881,number:'48',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23882,number:'09',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23883,number:'19',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23884,number:'29',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23885,number:'39',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23886,number:'49',bet:48.6,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:23887,number:'10',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23888,number:'20',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23889,number:'30',bet:48.6,selected:false,hovering:false,amount:''},
                            {id:23890,number:'40',bet:48.6,selected:false,hovering:false,amount:''}
                        ]
                    ],
                    // 特码A
                    [
                        [
                            {id:24842,number:'01',bet:43,selected:false,hovering:false,amount:''},
                            {id:24843,number:'11',bet:43,selected:false,hovering:false,amount:''},
                            {id:24844,number:'21',bet:43,selected:false,hovering:false,amount:''},
                            {id:24845,number:'31',bet:43,selected:false,hovering:false,amount:''},
                            {id:24846,number:'41',bet:43,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:24847,number:'02',bet:43,selected:false,hovering:false,amount:''},
                            {id:24848,number:'12',bet:43,selected:false,hovering:false,amount:''},
                            {id:24849,number:'22',bet:43,selected:false,hovering:false,amount:''},
                            {id:24850,number:'32',bet:43,selected:false,hovering:false,amount:''},
                            {id:24851,number:'42',bet:43,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:24852,number:'03',bet:43,selected:false,hovering:false,amount:''},
                            {id:24853,number:'13',bet:43,selected:false,hovering:false,amount:''},
                            {id:24854,number:'23',bet:43,selected:false,hovering:false,amount:''},
                            {id:24855,number:'33',bet:43,selected:false,hovering:false,amount:''},
                            {id:24856,number:'43',bet:43,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:24857,number:'04',bet:43,selected:false,hovering:false,amount:''},
                            {id:24858,number:'14',bet:43,selected:false,hovering:false,amount:''},
                            {id:24859,number:'24',bet:43,selected:false,hovering:false,amount:''},
                            {id:24860,number:'34',bet:43,selected:false,hovering:false,amount:''},
                            {id:24861,number:'44',bet:43,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:24862,number:'05',bet:43,selected:false,hovering:false,amount:''},
                            {id:24863,number:'15',bet:43,selected:false,hovering:false,amount:''},
                            {id:24864,number:'25',bet:43,selected:false,hovering:false,amount:''},
                            {id:24865,number:'35',bet:43,selected:false,hovering:false,amount:''},
                            {id:24866,number:'45',bet:43,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:24867,number:'06',bet:43,selected:false,hovering:false,amount:''},
                            {id:24868,number:'16',bet:43,selected:false,hovering:false,amount:''},
                            {id:24869,number:'26',bet:43,selected:false,hovering:false,amount:''},
                            {id:24870,number:'36',bet:43,selected:false,hovering:false,amount:''},
                            {id:24871,number:'46',bet:43,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:24872,number:'07',bet:43,selected:false,hovering:false,amount:''},
                            {id:24873,number:'17',bet:43,selected:false,hovering:false,amount:''},
                            {id:24874,number:'27',bet:43,selected:false,hovering:false,amount:''},
                            {id:24875,number:'37',bet:43,selected:false,hovering:false,amount:''},
                            {id:24876,number:'47',bet:43,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:24877,number:'08',bet:43,selected:false,hovering:false,amount:''},
                            {id:24878,number:'18',bet:43,selected:false,hovering:false,amount:''},
                            {id:24879,number:'28',bet:43,selected:false,hovering:false,amount:''},
                            {id:24880,number:'38',bet:43,selected:false,hovering:false,amount:''},
                            {id:24881,number:'48',bet:43,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:24882,number:'09',bet:43,selected:false,hovering:false,amount:''},
                            {id:24883,number:'19',bet:43,selected:false,hovering:false,amount:''},
                            {id:24884,number:'29',bet:43,selected:false,hovering:false,amount:''},
                            {id:24885,number:'39',bet:43,selected:false,hovering:false,amount:''},
                            {id:24886,number:'49',bet:43,selected:false,hovering:false,amount:''}
                        ],
                        [
                            {id:24887,number:'10',bet:43,selected:false,hovering:false,amount:''},
                            {id:24888,number:'20',bet:43,selected:false,hovering:false,amount:''},
                            {id:24889,number:'30',bet:43,selected:false,hovering:false,amount:''},
                            {id:24890,number:'40',bet:43,selected:false,hovering:false,amount:''}
                        ]
                    ],
                    // 特大特小组合
                    [
                        [
                            {id:24842,name:'特大',bet:1.98,selected:false,hovering:false,amount:''},
                            {id:24843,name:'特小',bet:1.98,selected:false,hovering:false,amount:''},
                            {id:24844,name:'特单',bet:1.98,selected:false,hovering:false,amount:''},
                            {id:24845,name:'特双',bet:1.98,selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24847,name:'特合大',bet:1.98,selected:false,hovering:false,amount:''},
                            {id:24848,name:'特合小',bet:1.98,selected:false,hovering:false,amount:''},
                            {id:24849,name:'特合单',bet:1.98,selected:false,hovering:false,amount:''},
                            {id:24850,name:'特合双',bet:1.98,selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24852,name:'特尾大',bet:1.98,selected:false,hovering:false,amount:''},
                            {id:24853,name:'特尾小',bet:1.98,selected:false,hovering:false,amount:''},
                            {id:24854,name:'特尾单',bet:3.7,selected:false,hovering:false,amount:''},
                            {id:24855,name:'特尾双',bet:3.7,selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24857,name:'特大双',bet:3.7,selected:false,hovering:false,amount:''},
                            {id:24858,name:'特小双',bet:3.7,selected:false,hovering:false,amount:''},
                        ]
                    ],
                ]
            }
        },
        computed:{
            ...mapState(['betNumber'])
        },
        watch:{
            betNumber(nVal){
                this.list.forEach((arr)=>{
                    arr.forEach((item)=>{
                        item.forEach((o)=>{
                            if (o.selected) {
                                o.amount = nVal
                            }
                        })
                    })
                })
                this.$forceUpdate()
            }
        },
        methods:{
            changeIndex(index){
                this.navIndex = index
            },
            getSelectdDatas(){
                let selectedDatas = []
                this.list.forEach((arr)=>{
                    arr.forEach((item)=>{
                        item.forEach((o)=>{
                            if (o.selected) {
                                selectedDatas.push(o)
                            }
                        })
                    })
                })
                return selectedDatas

            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
